<template>
  <view class="page-wrapper">
    <!-- 顶部导航栏 -->
    <view class="navbar-container" v-if="showNavbar">
      <CustomNavbar :title="navTitle" :title-style="navTitleStyle" :left="navLeft" :back-url="navBackUrl"
        :type="navType" :right-text="navRightText" :background-color="navBackgroundColor"
        :use-custom-height="navUseCustomHeight" :custom-height="navCustomHeight" @rightClick="onNavRightClick"
        @close="onNavClose" />
    </view>

    <!-- 页面内容区域 - 不滚动 -->
    <view class="content-container" :style="contentStyle">
      <slot></slot>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar-container" v-if="showTabBar">
      <tab-bar :current="currentPath" @add="onAddClick"></tab-bar>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

// 定义props
const props = defineProps({
  // TabBar相关
  showTabBar: {
    type: Boolean,
    default: true
  },
  pagePath: {
    type: String,
    default: '/pages/index/index'
  },

  // 导航栏相关
  showNavbar: {
    type: Boolean,
    default: true
  },
  navTitle: {
    type: String,
    default: '猪猪存钱罐'
  },
  navTitleStyle: {
    type: Object,
    default: () => ({
      color: '#000000'
    })
  },
  navLeft: {
    type: String,
    default: 'back'
  },
  navType: {
    type: String,
    default: ''
  },
  navRightText: {
    type: Object,
    default: () => ({
      title: '',
      color: '#333333',
      fontWeight: 'normal',
      fontSize: '32rpx'
    })
  },
  navBackgroundColor: {
    type: String,
    default: '#FFFFFF'
  },
  navUseCustomHeight: {
    type: Boolean,
    default: false
  },
  navCustomHeight: {
    type: Number,
    default: 44
  }
});

// 定义事件
const emit = defineEmits(['navRightClick', 'navClose', 'addClick']);

// 响应式数据
const currentPath = ref(props.pagePath);

// 计算内容区域样式
const contentStyle = computed(() => {
  const navbarHeight = props.showNavbar ? '100rpx' : '0';
  const tabbarHeight = props.showTabBar ? '100rpx' : '0';

  return {
    height: `calc(100vh - ${navbarHeight} - ${tabbarHeight})`,
    overflow: 'hidden'
  };
});

// 监听pagePath变化
watch(() => props.pagePath, (newPath) => {
  currentPath.value = newPath;
}, { immediate: true });

// 导航栏右侧按钮点击事件
const onNavRightClick = (type) => {
  emit('navRightClick', type);
};

// 导航栏关闭事件
const onNavClose = () => {
  emit('navClose');
};

// 添加按钮点击事件
const onAddClick = () => {
  emit('addClick');
  uni.navigateTo({
    url: '/pages/transaction/add-bill'
  });
};
</script>

<style lang="scss">
.page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFD84D;
  background: linear-gradient(172deg, rgba(255, 216, 77, 1) 0%, rgba(255, 227, 125, 1) 15%, rgba(255, 255, 255, 1) 50%);

  .navbar-container {
    flex-shrink: 0;
    z-index: 100;
  }

  .content-container {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  .tab-bar-container {
    flex-shrink: 0;
    width: 100%;
    z-index: 9;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}
</style>